<template>
  <!-- 巡河记录 -->
  <div id="riverPatrolRecord">
       <div class="container">
         <ul class="head">
           <li>姓名</li>
           <li>实巡次数</li>
           <li>时间</li>
           <li>地点</li>
           <li>情况</li>
         </ul>
         <div class="body">
           
           <div style="height:800px;">
              <yd-slider autoplay="6000" direction="vertical" :show-pagination="false">
                  <yd-slider-item v-for="(item,index) of list" :key="index">
                      <ul class="kuang">
                          <li v-for="(data,index) of item" :key="index">
                            <ul class="detail">
                              <li>{{data.user_nicename}}</li>
                              <li>{{data.num}}</li>
                              <li>{{data.add_time|changedate}}</li>
                              <li>{{data.rivers}}</li>
                              <li class="over">{{data.event}}</li>
                            </ul>
                          </li>
                        </ul>
                  </yd-slider-item>
              </yd-slider>
          </div>
         </div>
       </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'riverPatrolRecord',
  data () {
    return {
      list:[],
    }
  },
  created(){
    this.getRecord()
  },
  methods:{
    getRecord(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=getRank")
      .then(function(res){
        var data = res.data.content;
        var num = Math.ceil(data.length / 5);
        console.log(num);
        for(var i=0;i<num;i++){
          var arr = [];
          for(var j=0;j<5;j++){
            if(data[j]){
              arr.push(data[j]);
            }
          }
          that.list.push(arr);
          //console.log(that.list,6666)
          //console.log(arr,11111)
          data.splice(0,5);
          //console.log(data,22222)
        }
      })
    },
  },
  filters:{
      changedate(val){
         return val.split(" ")[0]
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #riverPatrolRecord{
        overflow: hidden;
        width:24vw;
        height:27.7vh;
        color:#FFF;
        background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/record.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding:2.7vh 1.56vw;
        padding-top:3.5vh;
    }
    #riverPatrolRecord .container{
      width:100%;
    }
    #riverPatrolRecord .head{
      font-size:15px;
      display:flex;
      justify-content:flex-start;
      border-bottom:1px solid #60D8F6;
    }
    #riverPatrolRecord .head li{
      text-align: center;
      line-height:20px;
    }
    #riverPatrolRecord .head li:nth-child(1){
      width:4.1vw;
    }
    #riverPatrolRecord .head li:nth-child(2){
      width:4.1vw;
    }
    #riverPatrolRecord .head li:nth-child(3){
      width:4.1vw;
    }
    #riverPatrolRecord .head li:nth-child(4){
      width:3.1vw;
    }
    #riverPatrolRecord .head li:nth-child(5){
      width:4.1vw;
    }
    #riverPatrolRecord .body{
      height:18vh;
    }
    #riverPatrolRecord .kuang .detail{
      font-size:0.1rem;
      display:flex;
      justify-content:flex-start;
      border-top:1px solid #60D8F6;
    }
    #riverPatrolRecord .detail li{
      text-align: center;
      line-height:4vh;
    }
    #riverPatrolRecord .detail li:nth-child(1){
      width:4.1vw;
    }
    #riverPatrolRecord .detail li:nth-child(2){
      width:4.1vw;
    }
    #riverPatrolRecord .detail li:nth-child(3){
      width:4.1vw;
    }
    #riverPatrolRecord .detail li:nth-child(4){
      width:4.1vw;
    }
    #riverPatrolRecord .detail li:nth-child(5){
      width:4.1vw;
    }
    .over{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
</style>